<%+cbi/valueheader%>

<script type="text/javascript">//<![CDATA[
	var freqlist = <%= luci.http.write_json(self.freqlist) %>;
	var hwmodes  = <%= luci.http.write_json(self.hwmodes) %>;
	var htmodes  = <%= luci.http.write_json(self.htmodes) %>;

	var channels = {
		'2g': [
			'auto', 'auto', true
		],
		'5g': [
			'auto', 'auto', true
		],
		'6g': [],
		'60g': []
	};

	for (var i = 0; i < freqlist.length; i++) {
		var band;

		if (freqlist[i].mhz >= 2412 && freqlist[i].mhz <= 2484)
			band = '2g';
		else if (freqlist[i].mhz >= 5160 && freqlist[i].mhz <= 5885)
			band = '5g';
		else if (freqlist[i].mhz >= 5925 && freqlist[i].mhz <= 7125)
			band = '6g';
		else if (freqlist[i].mhz >= 58329 && freqlist[i].mhz <= 69120)
			band = '60g';
		else
			continue;

		channels[band].push(
			freqlist[i].channel,
			'%d (%d MHz)'.format(freqlist[i].channel, freqlist[i].mhz),
			!freqlist[i].restricted
		);
	}

	var modes = [
		'', 'Legacy', true,
		'n', 'N', hwmodes.n,
		'ac', 'AC', hwmodes.ac,
		'ax', 'AX', hwmodes.ax
	];

	var htmodes = {
		'':   [
			'', '-', true
		],
		'n':  [
			'HT20', '20 MHz', htmodes.HT20,
			'HT40', '40 MHz', htmodes.HT40
		],
		'ac': [
			'VHT20', '20 MHz', htmodes.VHT20,
			'VHT40', '40 MHz', htmodes.VHT40,
			'VHT80', '80 MHz', htmodes.VHT80,
			'VHT160', '160 MHz', htmodes.VHT160
		],
		'ax': [
			'HE20', '20 MHz', htmodes.HE20,
			'HE40', '40 MHz', htmodes.HE40,
			'HE80', '80 MHz', htmodes.HE80,
			'HE160', '160 MHz', htmodes.HE160
		]
	};

	var bands = {
		'':   [
			'2g', '2.4 GHz', (channels['2g'].length > 3),
			'5g', '5 GHz', (channels['5g'].length > 3)
		],
		'n':  [
			'2g', '2.4 GHz', (channels['2g'].length > 3),
			'5g', '5 GHz', (channels['5g'].length > 3)
		],
		'ac': [
			'5g', '5 GHz', true
		],
		'ax': [
			'2g', '2.4 GHz', (channels['2g'].length > 3),
			'5g', '5 GHz', (channels['5g'].length > 3)
		]
	};

	function cbi_set_values(sel, vals)
	{
		if (sel.vals)
			sel.vals.selected = sel.selectedIndex;

		while (sel.options[0])
			sel.remove(0);

		for (var i = 0; vals && i < vals.length; i += 3)
		{
			if (!vals[i+2])
				continue;

			var opt = document.createElement('option');
			    opt.value = vals[i+0];
			    opt.text  = vals[i+1];

			sel.add(opt);
		}

		if (!isNaN(vals.selected))
			sel.selectedIndex = vals.selected;

		sel.parentNode.style.display = (sel.options.length <= 1) ? 'none' : '';
		sel.vals = vals;
	}

	function cbi_toggle_wifi_mode(id)
	{
		cbi_toggle_wifi_htmode(id);
		cbi_toggle_wifi_band(id);
	}

	function cbi_toggle_wifi_htmode(id)
	{
		var mode = document.getElementById(id + '.mode');
		var bwdt = document.getElementById(id + '.htmode');

		cbi_set_values(bwdt, htmodes[mode.value]);
	}

	function cbi_toggle_wifi_band(id)
	{
		var mode = document.getElementById(id + '.mode');
		var band = document.getElementById(id + '.band');

		cbi_set_values(band, bands[mode.value]);
		cbi_toggle_wifi_channel(id);
	}

	function cbi_toggle_wifi_channel(id)
	{
		var band = document.getElementById(id + '.band');
		var chan = document.getElementById(id + '.channel');

		cbi_set_values(chan, channels[band.value]);
	}

	function cbi_init_wifi(id)
	{
		var mode = document.getElementById(id + '.mode');
		var band = document.getElementById(id + '.band');
		var chan = document.getElementById(id + '.channel');
		var bwdt = document.getElementById(id + '.htmode');

		cbi_set_values(mode, modes);

		if (/HE20|HE40|HE80|HE160/.test(<%= luci.http.write_json(self.map:get(section, "htmode")) %>))
			mode.value = 'ax';
		else if (/VHT20|VHT40|VHT80|VHT160/.test(<%= luci.http.write_json(self.map:get(section, "htmode")) %>))
			mode.value = 'ac';
		else if (/HT20|HT40/.test(<%= luci.http.write_json(self.map:get(section, "htmode")) %>))
			mode.value = 'n';
		else
			mode.value = '';

		cbi_toggle_wifi_mode(id);

		band.value = <%= luci.http.write_json(self.map:get(section, "band")) %>;

		cbi_toggle_wifi_band(id);

		bwdt.value = <%= luci.http.write_json(self.map:get(section, "htmode")) %>;
		chan.value = <%= luci.http.write_json(self.map:get(section, "channel")) %>;
	}
//]]></script>

<label style="float:left; margin-right:3px">
	<%:Mode%><br />
	<select style="width:auto" id="<%= cbid %>.mode" name="<%= cbid %>.mode" onchange="cbi_toggle_wifi_mode('<%= cbid %>')"></select>
</label>
<label style="float:left; margin-right:3px">
	<%:Band%><br />
	<select style="width:auto" id="<%= cbid %>.band" name="<%= cbid %>.band" onchange="cbi_toggle_wifi_band('<%= cbid %>')"></select>
</label>
<label style="float:left; margin-right:3px">
	<%:Channel%><br />
	<select style="width:auto" id="<%= cbid %>.channel" name="<%= cbid %>.channel"></select>
</label>
<label style="float:left; margin-right:3px">
	<%:Width%><br />
	<select style="width:auto" id="<%= cbid %>.htmode" name="<%= cbid %>.htmode"></select>
</label>
<br style="clear:left" />

<script type="text/javascript">cbi_init_wifi('<%= cbid %>');</script>

<%+cbi/valuefooter%>
